<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	input.filterValue{    
	    border:1px solid #aaa;padding:1px 5px;
	    margin:0px 5px;
	}
	</style>

<script>
    $(function () {
        function filterhandler(evt, ui) {

            var $toolbar = $grid.find('.pq-toolbar-search'),
                $value = $toolbar.find(".filterValue"),
                value = $value.val(),
                condition = $toolbar.find(".filterCondition").val(),
                dataIndx = $toolbar.find(".filterColumn").val(),
                filterObject;

            if (dataIndx == "") {//search through all fields when no field selected.
                filterObject = [];
                var CM = $grid.pqGrid("getColModel");
                for (var i = 0, len = CM.length; i < len; i++) {
                    var dataIndx = CM[i].dataIndx;
                    filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
                }
            }
            else {//search through selected field.
                filterObject = [{ dataIndx: dataIndx, condition: condition, value: value}];
            }
            $grid.pqGrid("filter", {
                oper: 'replace',
                data: filterObject
            });
        }
        var colM = [
            { title: "Customer ID", dataIndx: "customerid", width: 100 },
            { title: "Company Name", width: 180, dataIndx: "companyname" },
            { title: "Contact Name", width: 140, dataIndx: "contactname" },
            { title: "Contact Title", width: 140, dataIndx: "contacttitle" },
		    { title: "Address", width: "170", dataIndx: "address" }
		];
        var dataModel = {
            recIndx: "customerid", //primary key
            location: "remote",
            sorting: "local",            
            dataType: "JSON",
            method: "POST",
            sortIndx: "contactname",
            sortDir: "up",
            url: "/pro/customers/get",
            //url: "/customers.php", //for PHP
            getData: function (response) {
                return {data:response.data};
            }
        }
        var newObj = {
            flexHeight: true,
            scrollModel: {autoFit: true},
            pageModel: { type: 'local', curPage: 1 },
            //stringify:false, //for PHP
            dataModel: dataModel,
            colModel: colM,
            selectionModel: { type: 'cell', mode: 'single' },
            filterModel: { mode: 'OR' },
            toolbar: {
                cls: "pq-toolbar-search",
                items: [
                    { type: "<span style='margin:5px;'>Filter</span>" },
                    { type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'change': filterhandler}] },
                    { type: 'select', cls: "filterColumn",
                        listeners: [{ 'change': filterhandler}],
                        options: function (ui) {
                            var CM = ui.colModel;
                            var opts = [{ '': '[ All Fields ]'}];
                            for (var i = 0; i < CM.length; i++) {
                                var column = CM[i];
                                var obj = {};
                                obj[column.dataIndx] = column.title;
                                opts.push(obj);
                            }
                            return opts;
                        }
                    },
                    { type: 'select', style: "margin:0px 5px;", cls: "filterCondition",
                        listeners: [{ 'change': filterhandler}],
                        options: [
                        { "begin": "Begins With" },
                        { "contain": "Contains" },
                        { "end": "Ends With" },
                        { "notcontain": "Does not contain" },
                        { "equal": "Equal To" },
                        { "notequal": "Not Equal To" },
                        { "empty": "Empty" },
                        { "notempty": "Not Empty" },
                        { "less": "Less Than" },
                        { "great": "Great Than" }    
                        ]
                    }
                ]
            },
            editable: false,
            scrollModel: { horizontal: false },
            showTitle: false,
            columnBorders: true
        };
        var $grid = $("#grid_search").pqGrid(newObj);

    });
        
</script>    
</head>
<body>

<div id="grid_search" style="margin:auto;"></div>

</body>

</html>
